<gm:page title="Public Photos" authenticate="false">

  <style>
    body {
      background: black;
      }
    
    #videosList{
      background:black none repeat scroll 5%;
      height:500px;
      overflow:auto;
      padding-left:4px;
      width:310px;
      align:center;
      font-size: 100%;
      border-width: thick thick thick thick;
      border-spacing: 2px;
      border-style: solid solid solid solid;
      border-color: gray gray gray gray;
      border-collapse: separate;
      background-color: gray;
      }
    
  </style>
  <gm:data id="startWith" data="http://picasaweb.google.com/data/feed/base/user/MichaelEONeal/album/Menuitems?imgmax=640"/>

    
   <table>
     <tr>
        <td style="padding-right:10px; width:300px" valign="top">
            <gm:list id="videosList" 
              data="${startWith}" 
              pagesize="6" 
              template="videosListTemplate"/>
        </td>
        <td style="width:288px" valign="top">
             <gm:item template="videoDetailTemplate">
                 <gm:handleEvent 
                   event="select" 
                   src="videosList"/>
             </gm:item>
         </td>
       </tr>
   </table>
 
 
  <gm:template id="videosListTemplate">
    <table class="black-theme" style="width:100%">
      <tr repeat="true">
        <td valign="top">
          <gm:image ref="media:group/media:thumbnail[@width='144']/@url" style="float:left; margin-right:5px"/>
          <gm:image ref="media:group/media:thumbnail[@height='144']/@url" style="float:left; margin-right:5px"/>
          <gm:html ref="atom:title"/>
        </td>
      </tr>
      <tfoot>
        <tr>
          <td><gm:pager/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>

  <gm:template id="videoDetailTemplate">  
    <gm:html ref="atom:title"/>
    <gm:image ref="media:group/media:content/@url"/>
  </gm:template>
</gm:page>